<template>
  <div class="form-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="头像">
            <el-avatar :src="ruleForm.headUrl"></el-avatar>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realName">
            <el-input
              v-model.trim="ruleForm.realName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="username">
            <el-input
              v-model.trim="ruleForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-select
              v-model="ruleForm.sex"
              clearable
              placeholder="请选择性别"
            >
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>

          <!-- 专业、学历、城市、籍贯、生日、入学、毕业 -->
          <el-form-item label="专业和班级" prop="majorClass">
            <el-input
              v-model.trim="ruleForm.majorClass"
              autocomplete="off"
              placeholder="例如: 软件192"
            ></el-input>
          </el-form-item>
          <el-form-item label="获得学历" prop="educationBackground">
            <el-select
              v-model="ruleForm.educationBackgroundName"
              clearable
              placeholder="请选择"
              style="width: 330px"
              @change="
                setEducationBackground(ruleForm.educationBackgroundName * 1)
              "
            >
              <el-option
                v-for="item in educationBackgroundList"
                :key="item.value"
                :label="item.label"
                :value="item.value * 1"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所在城市" prop="liveCity" size="mini">
            <!-- 省市区级联选择器 -->
            <el-cascader
              v-model="selectedOptionsLiveCity"
              size="mini"
              :options="options"
              filterable
              clearable
              style="width: 250px"
              @change="handleChangeLiveCity"
            />
          </el-form-item>
          <el-form-item label="所属籍贯" prop="nativePlace">
            <el-input
              v-model="ruleForm.nativePlace"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="所属籍贯" prop="nativePlace" size="mini">
            <el-cascader
              v-model="selectedOptionsNativePlace"
              size="mini"
              :options="options"
              filterable
              clearable
              style="width: 250px"
              @change="handleChangeNativePlace"
            />
          </el-form-item> -->

          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="ruleForm.birthday"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="入学年份" prop="enterTime">
            <el-date-picker
              v-model="ruleForm.enterTime"
              align="right"
              type="date"
              placeholder="选择入学年份"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="毕业年份" prop="graduateTime">
            <el-date-picker
              v-model="ruleForm.graduateTime"
              align="right"
              type="date"
              placeholder="选择毕业年份"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="行业领域" prop="occupationalId">
            <el-select
              v-model="ruleForm.occupationalName"
              clearable
              placeholder="请选择"
              style="width: 330px"
              @change="setOccupational(ruleForm.occupationalName * 1)"
            >
              <el-option
                v-for="item in occupationalList"
                :key="item.value"
                :label="item.label"
                :value="item.value * 1"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="更多行业领域说明" prop="occupationalDescription">
            <el-input
              v-model="ruleForm.occupationalDescription"
              type="textarea"
            ></el-input>
          </el-form-item>

          <el-form-item label="校友身份" prop="identity">
            <el-select
              v-model="ruleForm.identity"
              clearable
              placeholder="请选择校友身份"
            >
              <el-option label="就读" value="就读"></el-option>
              <el-option label="教职工" value="教职工"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="ruleForm.identity == '教职工'"
            label="在校岗位"
            prop="postSchool"
          >
            <el-input
              v-model.trim="ruleForm.postSchool"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="工作单位" prop="workUnit">
            <el-input
              v-model.trim="ruleForm.workUnit"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="当前职位" prop="position">
            <el-input
              v-model.trim="ruleForm.position"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model.trim="ruleForm.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="微信" prop="wechat">
            <el-input
              v-model.trim="ruleForm.wechat"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="QQ" prop="qq">
            <el-input v-model.trim="ruleForm.qq" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="email" prop="email">
            <el-input
              v-model.trim="ruleForm.email"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否展示">
            <el-switch v-model="ruleForm.showInformation"></el-switch>
          </el-form-item> -->
          <el-form-item label="是否展示" prop="showInformation">
            <el-select
              v-model="ruleForm.showInformation"
              clearable
              placeholder="是否展示"
            >
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="row != null" label="openId" prop="openId">
            <el-input
              v-model.trim="ruleForm.openId"
              autocomplete="off"
              disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">
              提交
            </el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    userUpdate,
    occupationalSelectView,
    educationBackgroundSelectView,
  } from '@/api/management/management'
  // 导入省市区数据组件
  import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
  import { build7z } from '../../config/setting.config'
  export default {
    name: 'Form',
    data() {
      return {
        ruleForm: {
          id: '',
          realName: '',
          username: '',
          sex: '',
          identity: '',
          birthday: '',
          liveCity: '',
          nativePlace: '',
          majorClass: '',
          enterTime: '',
          graduateTime: '',
          educationBackground: '',
          occupationalId: '',
          occupationalDescription: '',
          workUnit: '',
          position: '',
          phone: '',
          wechat: '',
          email: '',
          qq: '',
          showInformation: '',
          headUrl: '',
          openId: '',
          occupational: '',
        },
        rules: {
          username: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
            {
              min: 1,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur',
            },
          ],
          realName: [
            { required: true, message: '请输入真实姓名', trigger: 'blur' },
            {
              min: 1,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur',
            },
          ],
          sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
          identity: [
            { required: true, message: '请选择校友身份', trigger: 'change' },
          ],
          occupationalId: [
            { required: true, message: '请选择行业领域', trigger: 'change' },
          ],
          sebirthdayx: [
            { required: true, message: '请选择生日', trigger: 'change' },
          ],
          workUnit: [
            { required: true, message: '请输入工作单位', trigger: 'blur' },
          ],
          position: [
            { required: true, message: '请输入当前职位', trigger: 'blur' },
          ],
          occupationalDescription: [
            {
              required: true,
              message: '请填写更多行业领域说明',
              trigger: 'blur',
            },
          ],
          phone: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
          ],
          wechat: [{ required: true, message: '请输入微信', trigger: 'blur' }],
          qq: [{ required: true, message: '请输入QQ', trigger: 'blur' }],
          email: [{ required: true, message: '请输入email', trigger: 'blur' }],
          enterTime: [
            { required: true, message: '请选择入学时间', trigger: 'blur' },
          ],
          majorClass: [
            { required: true, message: '请输入专业和班级', trigger: 'blur' },
          ],
          graduateTime: [
            { required: true, message: '请选择毕业时间', trigger: 'blur' },
          ],
          birthday: [
            { required: true, message: '请选择生日', trigger: 'blur' },
          ],
          showInformation: [
            { required: true, message: '请选择是否展示', trigger: 'blur' },
          ],
        },
        occupationalList: {},
        //时间选择器
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              },
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              },
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              },
            },
          ],
        },
        row: '',
        // 将省市区数据赋给级联选择器
        options: regionData,
        // 存放用户选择后省市区的信息
        selectedOptionsLiveCity: [],
        // selectedOptionsNativePlace: [],
      }
    },
    created() {
      this.row = this.$route.query.row
      if (this.row) {
        this.ruleForm = Object.assign({}, this.row)
        //赋值地区
        this.selectedOptionsLiveCity =
          TextToCode[this.ruleForm.liveCity.split('-')[0]][
            this.ruleForm.liveCity.split('-')[1]
          ][this.ruleForm.liveCity.split('-')[2]].code
      }
      this.getEducationBackgroundList()
      this.getOccupationalList()
    },
    methods: {
      // 省市区级联选择器选择后更新用户前端
      handleChangeLiveCity(value) {
        for (let i = 0; i < this.selectedOptionsLiveCity.length; i++) {
          if (i === 0) {
            const province = CodeToText[this.selectedOptionsLiveCity[i]]
            this.ruleForm.liveCity = province
          }
          if (i === 1) {
            const city = CodeToText[this.selectedOptionsLiveCity[i]]
            this.ruleForm.liveCity += '-' + city
          }
          if (i === 2) {
            const country = CodeToText[this.selectedOptionsLiveCity[i]]
            this.ruleForm.liveCity += '-' + country
          }
        }
      },
      // handleChangeNativePlace(value) {
      //   const province = ''
      //   const city = ''
      //   const country = ''
      //   for (let i = 0; i < this.selectedOptionsNativePlace.length; i++) {
      //     if (i === 0) {
      //       province = CodeToText[this.selectedOptionsNativePlace[i]]
      //       debugger
      //     }
      //     if (i === 1) {
      //       city = CodeToText[this.selectedOptionsNativePlace[i]]
      //     }
      //     if (i === 2) {
      //       country = CodeToText[this.selectedOptionsNativePlace[i]]
      //     }
      //   }
      //   this.resetForm.nativePlace = province + '-' + city + '-' + country
      // },
      submitForm(ruleForm) {
        debugger
        this.$refs['ruleForm'].validate(async (valid) => {
          if (valid) {
            //判断编辑or添加
            if (this.row) {
              await userUpdate(this.ruleForm).then((res) => {
                if (res.code == 200) {
                  debugger
                  this.$baseMessage(res.data, 'success')
                } else {
                  this.$baseMessage(res.data, 'error')
                }
              })
            } else {
              await userAdd(this.ruleForm).then((res) => {
                if (res.code == 200) {
                  this.$baseMessage(res.data, 'success')
                } else {
                  this.$baseMessage(res.data, 'error')
                }
              })
            }
            //置空
            // this.ruleForm = this.$options.data().ruleForm
            // this.$route.go(-1)
          } else {
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      //获取 行业领域
      async getOccupationalList() {
        await occupationalSelectView().then((res) => {
          if (res.code == 200) {
            this.occupationalList = res.data
          } else {
            this.$baseMessage('行业领域获取失败', 'error')
          }
        })
      },
      //获取 学历
      async getEducationBackgroundList() {
        await educationBackgroundSelectView().then((res) => {
          if (res.code == 200) {
            this.educationBackgroundList = res.data
          } else {
            this.$baseMessage('学历获取失败', 'error')
          }
        })
      },
      setEducationBackground(value) {
        this.ruleForm.educationBackground = value
      },
      setOccupational(value) {
        this.ruleForm.occupationalId = value
      },
    },
  }
</script>
